<template>
    <div class="my_audio">
        <div class="img_box">
            <img :src="info.src" alt="无法显示">
            <button class="iconfont img_button" @click="playSong($event)" ref="imgBtn">&#xe60b;</button>
        </div>
        <div class="control" v-show="flag" ref="control">
            <div class="artist">
                <h4>{{info.song}}</h4>
                <h5>{{info.artist}}</h5>
            </div>
            <div class="buttons">
                <button class="iconfont" @click="lastSong">&#xe603;</button>
                <button class="iconfont" @click="playSong" ref="playBtn">&#xe60b;</button>
                <button class="iconfont" @click="nextSong">&#xe602;</button>
            </div>
            <span>{{playTime}}</span>
            <input type="range" class="slider" :value="progress" @change="changePlayTime" ref="progress">
            <span>{{songTime}}</span>
            <span class="iconfont play" @click="isMute" ref="mute">&#xe60a;</span>
            <input type="range" class="volume" @change="changeVolume" :value="volume" ref="volume">
            <span class="iconfont play" @click="isLoop($event)">&#xe604;</span>
            <span class="iconfont play">&#xe600;</span>
        </div>
        <button class="open_button iconfont" @click="openControl($event, $el)">&#xe60e;</button>
        <audio ref="audio" @canplay="getSongTime" @timeupdate="playTimeUpdate($event)" @ended="playRank"></audio>
    </div>
</template>

<script>
import './global/iconfont.css'

export default {
    name: 'MyAudio',
    props: {
        playList: {
            type: Array
        }
    },
    data () {
        return {
            info: {
                src: null,
                song: '',
                artist: ''
            },
            mask: false,
            flag: false,
            flag1: false,
            play: false,
            mute: false,
            playTime: '00:00',
            songTime: '00:00',
            progress: 0,
            volume: 100,
            indexs: 1,
            index: 0
        }
    },
    methods: {
        // 歌曲时间过滤
        time (times) {
            if (times > 0) {
                let minute = parseInt(times / 60)
                if (minute < 10) {
                minute = '0' + minute
            }
            let second = parseInt(times % 60)
            if (second < 10) {
                second = '0' + second
            }
            times = `${minute}:${second}`
            return times
            } else {
                return '00:00'
            }
        },
        // 初始化歌单
        getSongList () {
            this.index = this.playList[0].id
        },
        // 获取歌曲地址
        getSrc () {
            this.$refs.audio.src = this.playList[0].url
            this.info.src = this.playList[0].src
            this.info.song = this.playList[0].song,
            this.info.artist = this.playList[0].artist
        },
        // 播放歌曲
        playSong () {
            this.play = !this.play
            this.play ? (this.$refs.playBtn.innerHTML = '&#xe637;', this.$refs.imgBtn.innerHTML = '&#xe637;', this.$refs.audio.play()) : (this.$refs.playBtn.innerHTML = '&#xe60b;', this.$refs.imgBtn.innerHTML = '&#xe60b;', this.$refs.audio.pause())
        },
        song (index) {
            this.$refs.audio.src = this.playList[index - 1].url
            this.info.src = this.playList[index - 1].src
            this.info.song = this.playList[index - 1].song
            this.info.artist = this.playList[index - 1].artist
            this.play ? this.$refs.audio.play() : (this.play = !this.play, this.$refs.playBtn.innerHTML = '&#xe637;', this.$refs.imgBtn.innerHTML = '&#xe637;', this.$refs.audio.play())
        },
        // 上一首
        lastSong () {
            if (this.index > 1) {
                this.index--
                this.song(this.index)
            } else {
                this.index = this.playList.length
                this.song(this.index)
            }
        },
        // 下一首
        nextSong () {
            if (this.index < this.playList.length) {
                this.index++
                this.song(this.index)
            } else {
                this.index = 1
                this.song(this.index)
            }
        },
        // 打开audio的控制组件
        openControl (event, el) {
            this.flag = !this.flag
            this.flag ? (event.target.innerHTML = '&#xe60f;', el.style.width = '900px') : (event.target.innerHTML = '&#xe60e;', el.style.width = '100px')
        },
        // 获取歌曲时长
        getSongTime () {
            this.songTime = this.time(this.$refs.audio.duration)
        },
        // 播放时间更新
        playTimeUpdate () {
            this.playTime = this.time(this.$refs.audio.currentTime)
            this.progress = (this.$refs.audio.currentTime / this.$refs.audio.duration) * 100
            this.$refs.progress.style.background = `linear-gradient(to right,#059CFA 0%, skyblue ${(this.$refs.audio.currentTime / this.$refs.audio.duration) * 100}%, white)`
        },
        // 改变播放时间
        changePlayTime (el) {
            this.$refs.audio.currentTime = (el.target.value / 100) * this.$refs.audio.duration
            el.target.style.background = `linear-gradient(to right,#059CFA 0%, skyblue ${(this.$refs.audio.currentTime / this.$refs.audio.duration) * 100}%, white)`
        },
        // 是否静音
        isMute () {
            this.mute = !this.mute
            this.mute ? (this.$refs.mute.innerHTML = '&#xe609;', this.$refs.audio.muted = this.mute, this.volume = 0) : (this.$refs.mute.innerHTML = '&#xe60a;', this.$refs.audio.muted = this.mute, this.volume = 100, this.$refs.audio.volume = this.volume / 100)
        },
        // 播放顺序按钮
        isLoop (el) {
            if (this.indexs === 1) {
                this.indexs++
                el.target.innerHTML = '&#xe607;'
                this.$refs.audio.loop = true
            } else if (this.indexs === 2) {
                this.indexs++
                el.target.innerHTML = '&#xe6a0;'
                this.$refs.audio.loop = false
            } else if (this.indexs === 3) {
                this.indexs = 1
                el.target.innerHTML = '&#xe604;'
                this.$refs.audio.loop = false
            }
        },
        // 随机播放
        playRandom () {
            const index = Math.floor(Math.random() * (this.playList.length)) + 1
            this.index = index
            this.$refs.audio.src = this.playList[index - 1].url
            this.$refs.audio.play()
        },
        // 播放顺序 
        playRank () {
            if (this.indexs === 1) {
                this.nextSong()
            } else if (this.indexs === 3) {
                this.playRandom()
            }
        },
        // 音量改变
        changeVolume () {
            this.volume = this.$refs.volume.value
            this.$refs.audio.volume = this.$refs.volume.value / 100
            this.$refs.volume.style.background = `linear-gradient(to right,#059CFA 0%, skyblue ${(this.$refs.audio.currentTime / this.$refs.audio.duration) * 100}%, white)`
            this.$refs.volume.value > 0 ? (this.$refs.mute.innerHTML = '&#xe60a;', this.mute = false) : (this.$refs.mute.innerHTML = '&#xe609;', this.mute = true)
        }
    },
    created () {
        this.getSongList()
    },
    mounted () {
        this.getSrc()
    }
}
</script>

<style lang="less" scoped>
.my_audio {
    height: 80px;
    width: 100px;
    box-shadow: 5px -5px 8px #3794eb;
    .img_box {
        float: left;
        position: relative;
        width: 80px;
        height: 80px;
        img {
            position: absolute;
            width: 100%;
            height: 100%;
        };
        .img_button {
            cursor: pointer;
            margin: 0;
            padding: 0;
            border: none;
            position: absolute;
            width: 15px;
            height: 15px;
            font-size: 10px;
            text-align: center;
            line-height: 15px;
            border-radius: 50%;
            right: 5px;
            bottom: 5px;
        };
    };

    .control {
        float: left;
        display: flex;
        width: 800px;
        height: 80px;
        align-items: center;
        background-image: linear-gradient(to right, #7164e6, #91dbe5);
        .artist {
            height: 80px;
            width: 90px;
            margin-left: 10px;
            h4,
            h5 {
                margin: 0;
                width: 90px;
                height: 30px;
                line-height: 40px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            };
        };
        .buttons {
            display: flex;
            justify-content: center;
            align-items: center;
            button {
                height: 40px;
                width: 40px;
                border-radius: 50%;
                border: 1px solid #3794eb;
                background-color: skyblue;
                margin: 0 5px;
                cursor: pointer;
                color: #6853c5;
                &:hover {
                    background-color: #4fbff3;
                };
                &:active {
                    box-shadow: 0;
                    transform: translateY(2px)
                }
            };
        };
        .slider {
            -webkit-appearance: none;
            cursor: pointer;
            width: 300px;
            border-radius: 10px;
        };
        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 20px;
            width: 20px;
            margin-top: -5px;
            border-radius: 50%;
            background-color: #29a3c2;
            border: solid 0.125em rgba(205, 224, 230, 0.5);
        };
        .slider::-webkit-slider-runnable-track {
            height: 10px;
            border-radius: 10px;
            box-shadow: 1px 1px 0 0 #def3f8, inset 0 .125em .125em #29a3c2;
        };
        
        .volume {
            -webkit-appearance: none;
            cursor: pointer;
            width: 60px;
            border-radius: 5px;
        };
        .volume::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 15px;
            width: 15px;
            margin-top: -4px;
            border-radius: 50%;
            background-color: #29a3c2;
            border: solid 0.125em rgba(205, 224, 230, 0.5);
        };
        .volume::-webkit-slider-runnable-track {
            height: 5px;
            border-radius: 10px;
            box-shadow: 1px 1px 0 0 #def3f8, inset 0 .125em .125em #29a3c2;
        };
        span {
            margin: 0 5px;
        };
        .play {
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }
    };
    .open_button {
        float: left;
        height: 80px;
        margin: 0;
        padding: 0;
        border: none;
        color: #3794eb;
        font-size: 20px;
        cursor: pointer;
        background-color: #91dbe5;
    };
};
</style>
